<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
        <el-form-item label="时间范围">
          <el-date-picker
            style="width: 345px"
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            clearable
          />
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="queryParams.batchCode" placeholder="请输入批次号" clearable />
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input v-model="queryParams.manufacturer" placeholder="请输入生产厂家" clearable />
        </el-form-item>
        <el-form-item label="物料名称">
          <el-input v-model="queryParams.productName" placeholder="请输入物料编码" clearable />
        </el-form-item>
        <el-form-item label="出入库类型" label-width="100px">
          <el-select v-model="queryParams.operateType" placeholder="请选择类型" clearable @change="selectChange">
            <el-option label="入库" value="in" />
            <el-option label="出库" value="out" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery" type="danger">重置</el-button>
          <el-button type="success" icon="el-icon-download" @click="handleExport">导出excel</el-button>
        </el-form-item>
      </el-form>
      <!-- 出入库明细表格 -->
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;"
      >
        <el-table-column prop="productCode" label="物料编码" width="160" align="center"/>
        <el-table-column prop="productName" label="物料名称" align="center"/>
        <el-table-column prop="batchCode" label="批次号" width="120" align="center"/>
        <el-table-column prop="packSpec" label="规格" width="120" align="center"/>
        <el-table-column prop="num" label="数量" width="100" align="center"></el-table-column>
        <el-table-column prop="operateType" label="类型" width="100" align="center">
          <template #default = "{row}">
            <el-tag type="success" v-if="row.operateType == 'in'">入库</el-tag>
            <el-tag type="danger" v-if="row.operateType == 'out'">出库</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="productDate" label="生产日期" align="center"></el-table-column>
        <el-table-column prop="expDate" label="有效期" align="center"></el-table-column>
        <el-table-column prop="unitCode" label="货位号" width="120" align="center"/>
        <el-table-column prop="approvalNum" label="批准文号" align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家" width="180" align="center"/>
        <el-table-column prop="operator" label="操作人" align="center"  width="100"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          background layout=" total,prev, pager, next, sizes,jumper"
          :total="total"
          :page-size="queryParams.pageSize"
          :current-page.sync="queryParams.pageNum"
          @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import {queryStoStockLog} from '@/api/storeM/yxl'
export default {
  name: "StockInOutDetail",
  data() {
    return {
      queryParams: {
        batchCode: "",//批号
        productName: "",//商品名
        operateType: "",
        manufacturer:'',//生产厂家
        pageNum: 1,
        pageSize: 10,
      },
      dateRange: [this.getDefaultStartDate(),this.getDefaultEndDate()],
      total: 0,
      tableData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //切换类型
    selectChange(val){
      this.queryParams.operateType = val;
      this.getList();
    },
    getDefaultStartDate() {
      const date = new Date()
      date.setMonth(date.getMonth() - 1)
      return this.formatDate(date)
    },
    //获取今天的日期
    getDefaultEndDate() {
      return this.formatDate(new Date())
    },
    //格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    // 数据
    getList() {
      if (this.dateRange && this.dateRange[0]) {
        this.queryParams.beginDate = this.dateRange[0];
      } else {
        delete this.queryParams.beginDate ; // 如果时间为空，则删除该字段
      }
      if (this.dateRange && this.dateRange[1]) {
        this.queryParams.endDate = this.dateRange[1];
      } else {
        delete this.queryParams.endDate; // 如果时间为空，则删除该字段
      }
      queryStoStockLog(this.queryParams).then(res=>{
        this.tableData = res.data.rows;
        this.total = res.data.total;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        batchCode: "",//批号
        productName: "",//商品名
        operateType: "",
        manufacturer:'',//生产厂家
        pageNum: 1,
        pageSize: 10,
      };
      this.dateRange = [this.getDefaultStartDate(),this.getDefaultEndDate()];
      this.getList();
    },
    handleExport() {
      this.$message.success("导出成功！（模拟）");
    },
    handlePageChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style scoped>
.pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
